<template>
  <div class="login-container">
    <!-- 登录模块 -->
    <div class="login-body">
      <!-- 账号 -->
      <div class="ipt-txt">
        <span>*</span>
        <label for="login-id" class="loginid-txt">账号</label>
      </div>
      <el-input id="login-id" placeholder="请输入账号" v-model="username"></el-input>
      <!-- 密码 -->
      <div class="pwd-txt">
        <span>*</span>
        <label for="pwd-id" class="loginid-txt">密码</label>
      </div>
      <el-input placeholder="请输入密码" show-password v-model="password"></el-input>
      <!-- 记住密码 -->
      <el-checkbox>记住密码</el-checkbox>
      <!-- 登录按钮 -->
      <el-button type="primary" @click="login">登录</el-button>
      <!-- 底部 -->
      <footer class="login-footer">
        <div class="footer-t">
          <a href="javascript:;">找回密码</a>
          <span>| 还没用注册账号?</span>
          <a href="javascript:;">立即注册</a>
        </div>
        <p class="footer-b">QQ:100861162</p>
        <p class="footer-b">湘ICP备19027633号</p>
      </footer>
    </div>
  </div>
</template>

<script>
import { loginApi } from '@/logrequest/api'
export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      loginApi({ username: this.username, password: this.password }).then(({ data: res }) => {
        if (res.status === 200) {
          localStorage.setItem('token', res.token)
          localStorage.setItem('uid', res.id)
          localStorage.setItem('nickname', res.nickname)
          localStorage.setItem('email', res.email)
          this.$router.push('/mine')
        } else {
          this.$store.commit('openTitle', res.message)
          this.$store.dispatch('ToggleTitle')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  padding-top: 35px;
  .login-body {
    width: 70%;
    margin: auto;
    .ipt-txt,
    .pwd-txt {
      line-height: 70px;
      span {
        color: #f8836c;
        margin-right: 3px;
      }
      .loginid-txt {
        color: #606266;
        font-size: 15px;
      }
    }
    .el-checkbox {
      color: #000000;
      margin: 18px 0;
    }
    .el-button {
      display: block;
      width: 100%;
    }
    .login-footer {
      margin-top: 22px;
      .footer-t {
        margin-bottom: 50px;
        a {
          text-decoration: none;
          color: #800080;
        }
        span {
          color: #666666;
          margin: 0 4px;
        }
      }
      .footer-b {
        text-align: center;
        font-size: 12px;
        line-height: 15px;
      }
    }
  }
}
</style>